<template>
  <div class="min-h-screen bg-gray-50">
    <NavBar />
    
    <div v-if="loading" class="max-w-4xl mx-auto px-4 py-8">
      <div class="text-center py-12">
        <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-orange-500"></div>
        <p class="mt-4 text-gray-600">加载中...</p>
      </div>
    </div>
    
    <div v-else-if="chapter" class="max-w-4xl mx-auto px-4 py-8">
      <!-- 章节信息 -->
      <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <div class="text-center mb-6">
          <h1 class="text-2xl font-bold text-gray-800 mb-2">{{ chapter.title }}</h1>
          <div class="flex items-center justify-center gap-4 text-gray-600">
            <span>字数: {{ formatWordCount(chapter.word_count) }}</span>
            <span v-if="chapter.is_vip" class="px-3 py-1 bg-yellow-100 text-yellow-600 rounded-full text-sm">VIP</span>
          </div>
        </div>
      </div>
      
      <!-- 章节内容 -->
      <div class="bg-white rounded-lg shadow-md p-8 mb-6">
        <div
          v-if="chapter.content"
          class="prose prose-lg max-w-none text-gray-700 leading-relaxed whitespace-pre-wrap"
          v-html="formatContent(chapter.content)"
        ></div>
        <div v-else class="text-center text-gray-500 py-12">
          暂无内容
        </div>
      </div>
      
      <!-- 操作按钮 -->
      <div class="flex justify-between items-center">
        <button
          @click="$router.back()"
          class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
        >
          返回
        </button>
        
        <div class="flex gap-3">
          <button class="px-6 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors">
            上一章
          </button>
          <button class="px-6 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors">
            下一章
          </button>
        </div>
      </div>
    </div>
    
    <div v-else class="max-w-4xl mx-auto px-4 py-8">
      <div class="text-center py-12">
        <p class="text-gray-600">章节不存在</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { novelAPI } from '@/utils/api'
import NavBar from '@/components/layout/NavBar.vue'

const route = useRoute()
const router = useRouter()

const chapter = ref(null)
const loading = ref(false)

// 格式化字数
const formatWordCount = (count) => {
  if (count < 1000) return `${count}字`
  if (count < 10000) return `${(count / 1000).toFixed(1)}k`
  return `${(count / 10000).toFixed(1)}w`
}

// 格式化内容（转换为HTML，处理换行等）
const formatContent = (content) => {
  if (!content) return ''
  // 将文本按段落分割并添加样式
  return content
    .split('\n\n')
    .map(para => `<p class="mb-4">${para.replace(/\n/g, '<br>')}</p>`)
    .join('')
}

// 获取章节内容
onMounted(async () => {
  loading.value = true
  try {
    const res = await novelAPI.getChapterContent(
      route.params.novelId,
      route.params.chapterId
    )
    chapter.value = res.data
  } catch (error) {
    console.error('获取章节内容失败:', error)
  } finally {
    loading.value = false
  }
})
</script>

<style scoped>
/* 阅读样式优化 */
::v-deep(.prose) {
  font-size: 1.125rem;
  line-height: 1.875rem;
  color: #374151;
}

::v-deep(.prose p) {
  margin-bottom: 1.5rem;
  text-align: justify;
}

::v-deep(.prose p:first-child) {
  text-indent: 2em;
}
</style>

